<script setup lang="ts">
import { RouterView, RouterLink } from 'vue-router'
</script>
<template>
        <div class="main">
              <div class="router-list">
                <RouterLink class="link" active-class="active-link" to="/props">1、props</RouterLink>
                <RouterLink class="link" active-class="active-link" to="/event">2、自定义事件</RouterLink>
                <RouterLink class="link" active-class="active-link" to="/mitt">3、mitt</RouterLink>
                <RouterLink class="link" active-class="active-link" to="/v-model">4、v-model</RouterLink>
                <RouterLink class="link" active-class="active-link" to="/attrs">5、attrs</RouterLink>
                <RouterLink class="link" active-class="active-link" to="/refParent">6、$ref和&parent</RouterLink>
                <RouterLink class="link" active-class="actice-link" to="/provide-inject">7、provide和inject</RouterLink>
                <RouterLink class="link" active-class="actice-link" to="/pinia">8、pinia</RouterLink>
                <RouterLink class="link" active-class="actice-link" to="/slot">9、slot</RouterLink>
              </div>
              <div class="router-view">
                <h1>组件通信</h1>
                <RouterView></RouterView>
              </div>  
        </div>
</template>
<style scoped>
.main{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
}
.router-list{
        background: #ffffff;
        width: 20%;
        height: 99%;
        margin: 0 auto;
	display: flex;
	flex-direction: column;
        border: solid gray 2px;
        border-radius: 5px;
        

}

.link {
	background-color: #ffffff;
        text-align: left;
        height: 50px;
	color: black;
        display: flex;
        text-align: end;
        align-items: center;
        font-size:x-large;
}

.active-link{
	background-color: green;
	color:gold
}
.router-view{
        width: 80%;
        height: 99%;
        border: solid gray 2px;
        border-radius: 5px;
}
</style>
